<template>
  <div>
      <vue3VideoPlay 
      width="800px"
      :title=options.title
      :src="options.src"
      :poster="options.poster"
      @play="onPlay"
      @pause="onPause" 
      @timeupdate="onTimeupdate" 
      @canplay="onCanplay" />
  </div>
 
</template>
 
 
<script setup lang="ts">
import { reactive } from 'vue';
 
const options = reactive({
  speedRate: ["2.0", "1.0", "1.5", "1.25", "0.75"], //播放倍速
  // src: "https://cdn.jsdelivr.net/gh/xdlumia/files/video-play/IronMan.mp4", //视频源
  src: "http://vjs.zencdn.net/v/oceans.mp4", //视频源
  poster: '/textures/300.jpg', //封面
  title:'海鸥'
})
const onPlay = (ev) => {
  console.log('播放')
}
const onPause = (ev) => {
  console.log(ev, '暂停')
}
 
const onTimeupdate = (ev) => {
  console.log(ev, '时间更新')
}
const onCanplay = (ev) => {
  console.log(ev, '可以播放')
}
</script>
 
<style scoped>
</style>